<template>
  <div style="z-index: 999;;height: 640px;width: 365px; overflow: auto;padding: 2px;">
    <div v-for="itemdata in Data" class="todo" :style="`width:${Width}px;`">
        <div class="item title">
          <span>{{itemdata.title}}</span>
        </div>
        <div class="item content">
          <span>{{itemdata.xxnr}}</span>
        </div>
        <div class="item">
          <span  style="margin-left: 2px ;"class="opreate" @click="handleRead(itemdata)">已读</span>
          <span  style="margin-left: 8px;" class="opreate" @click="handleDetail(itemdata)">详情</span>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  name: 'MyTodo',
  props: ['Width', 'Data'],
  data() {
    return{
      
    }
  },
  computed: {

  },
  created() {

  },
  methods: {
    handleRead(data) {
      this.$emit('Read',data); 
    },
    handleDetail(data) {
      this.$emit('Detail',data); 
    }
  }
}
</script>
<style scoped>
    .todo {
			width: 200px;
			background-color: rgb(217, 236, 243,0.5);
			display:flex;
			flex-direction: column;
			align-items: center;
			padding: 2px;
			border-radius: 5px;
      margin-bottom: 5px;
		}
		.item {
			width: 100%;
			height: 20px;
			font-size: 12px;
		}
		.item span{
			width: 100%;
			overflow: hidden;
			text-overflow: ellipsis;
		}
		.title {
			font-weight: 600;
      margin-top:5px;
		}
		.content {
			height: 32px;
			
		}
		.opreate {
			cursor: pointer;
			color: blue;
		}
</style>
